<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品数据管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* 复制index.html相关样式 */
        :root { --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --border-radius: 20px; --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1); --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
        body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; }
        .card { border: none; border-radius: var(--border-radius); box-shadow: var(--shadow-light); transition: var(--transition); overflow: hidden; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
        .card-header { background: var(--primary-gradient); color: white; border: none; padding: 1.5rem; font-weight: 600; }
        .card-body { padding: 2rem; }
        .upload-area { border: 2px dashed #e0e6ed; border-radius: var(--border-radius); padding: 2rem; text-align: center; background: #f8f9fa; transition: var(--transition); }
        .upload-icon { font-size: 2.5rem; color: #667eea; margin-bottom: 1rem; opacity: 0.7; }
        .btn-outline-primary { transition: var(--transition); }
        .btn-outline-primary:hover { letter-spacing: 0.5px; }
        .btn { border-radius: 50px; padding: 12px 30px; font-weight: 600; transition: var(--transition); border: none; position: relative; overflow: hidden; }
        .btn-primary { background: var(--primary-gradient); box-shadow: var(--shadow-light); }
        .btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }
        .btn-outline-primary { border: 2px solid #667eea; color: #667eea; background: transparent; }
        .btn-outline-primary:hover { background: var(--primary-gradient); border-color: transparent; transform: translateY(-2px); }
        .table-container { background: rgba(255, 255, 255, 0.95); border-radius: var(--border-radius); box-shadow: var(--shadow-medium); overflow: hidden; backdrop-filter: blur(10px); }
        .table thead th { background-color: #343a40; color: white; font-weight: 600; border-top: none; position: sticky; top: 0; z-index: 3; white-space: nowrap; text-align: center; vertical-align: middle; font-size: 0.9rem; padding: 0.75rem 1rem; }
        .table tbody td { padding: 1rem; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; }
        .alert { border-radius: var(--border-radius); border: none; padding: 1.5rem; font-weight: 500; }
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
                /* --- 新增：固定操作列 --- */
        /* .table th:last-child, */
        .table td:last-child {
            /* position: -webkit-sticky;  for Safari */
            position: sticky;
            right: 0;
            z-index: 2;
        }
        .table th:last-child {
            z-index: 4; /* 确保操作列的表头在最上层 */
        }
        .table td:last-child {
            background-color: #ffffff; /* 添加白色背景以覆盖下方滚动内容 */
            box-shadow: -2px 0 5px rgba(0,0,0,0.05); /* 添加细微阴影以示区分 */
        }

        .table-hover > tbody > tr:hover > td:last-child {
            background-color: #f8f9fa; /* 确保悬停时背景色一致 */
        }
        /* --- 固定操作列结束 --- */
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="fas fa-chart-line me-2"></i>AI库存预测
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="{{ url_for('index') }}">
                    <i class="fas fa-home me-1"></i>返回主页
                </a>
{#                <a class="nav-link" href="{{ url_for('manual') }}">#}
{#                    <i class="fas fa-book me-1"></i>使用说明#}
{#                </a>#}
                <a class="nav-link" href="{{ url_for('clear_session') }}">
                    <i class="fas fa-trash me-1"></i>清除数据
                </a>
            </div>
        </div>
    </nav>
    <div class="container" style="margin-top: 5rem;">
        <!-- 系统监控 -->
        <div class="row mb-4">
            <div class="col-12">
                 <div class="accordion fade-in-up" id="systemMonitorAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                <h5 class="mb-0 fw-bold">
                                    <i class="fas fa-desktop me-2"></i> 系统状态监控 (点击展开)
                                </h5>
                </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#systemMonitorAccordion">
                            <div class="accordion-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- 模型状态显示 -->
                                        <div class="model-status">
                                            <h5 class="mb-3"><i class="fas fa-cogs me-2"></i>模型加载状态</h5>
                                            <div id="modelStatus">
                                                <div class="status-item">
                                                    <span class="status-icon loading"></span>
                                                    <span>正在检查模型状态...</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <!-- 性能优化提示 -->
                                        <div class="performance-tips">
                                            <h5><i class="fas fa-lightbulb me-2"></i>性能优化提示</h5>
                                            <ul>
                                                <li><strong>首次使用：</strong>系统会在后台预加载AI模型，可能需要几秒钟时间</li>
                                                <li><strong>数据量：</strong>系统会自动限制显示前100条记录，完整数据仍可用于预测</li>
                                                <li><strong>模型缓存：</strong>模型加载后会缓存在内存中，后续操作会更快</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品列表与搜索 -->
        <div class="row mb-5">
            <div class="col-12">
                <div class="card fade-in-up-delay-1">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0 fw-bold">
                           <i class="fas fa-table me-2"></i> 商品列表
                           <span class="badge bg-secondary ms-2">{{ table_data|length }} 条结果</span>
                        </h5>
                        <div class="d-flex align-items-center">
                            <form action="{{ url_for('product_data_manage') }}" method="get" class="d-flex align-items-center me-2" id="searchForm">
                                <input class="form-control form-control-sm" type="search" placeholder="搜索商品ID" aria-label="Search" name="q" value="{{ search_query or '' }}">
                                <button class="btn btn-sm btn-light ms-2" type="submit" title="搜索">
                                    <i class="fas fa-search"></i>
                                </button>
                            </form>
                            <a href="{{ url_for('clear_session') }}" class="btn btn-sm btn-link text-white text-decoration-none" title="清除并重置">
                                <i class="fas fa-sync-alt me-1"></i>重置
                            </a>
                        </div>
                    </div>
                    <div class="table-container">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        {% if table_data %}
                                            {% for key in table_data[0].keys() %}
                                                {% if key != '统计日期' %}
                                                    <th class="text-center">{{ key }}</th>
                                                {% endif %}
                                            {% endfor %}
                                            <th class="text-center">操作</th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for row in table_data %}
                                    <tr>
                                        {% for key, value in row.items() %}
                                            {% if key != '统计日期' %}
                                                {% if key == '商品ID' %}
                                                    <td class="text-center align-middle">{{ value }}</td>
                                                {% else %}
                                                    <td>{{ value }}</td>
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                        <td class="text-center align-middle">
                                            <a href="{{ url_for('detail_id', item_id=row['商品ID']) }}" class="btn btn-outline-primary btn-sm">
                                                <i class="fas fa-eye me-1"></i>分析
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 添加滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.background = 'rgba(255, 255, 255, 0.98)';
            } else {
                navbar.style.background = 'rgba(255, 255, 255, 0.95)';
            }
        });

        // 文件上传处理
        const fileInput = document.getElementById('file');
        const fileLabel = document.querySelector('label[for="file"]');

        if (fileInput) {
            fileInput.addEventListener('change', function(e) {
                const fileName = e.target.files[0]?.name;
                if (fileName) {
                    fileLabel.innerHTML = `<i class="fas fa-check-circle me-2"></i> ${fileName}`;
                    fileLabel.classList.remove('btn-outline-primary');
                    fileLabel.classList.add('btn-success');
                }
            });
        }

        const uploadForm = document.querySelector('form.upload-area');
        if (uploadForm) {
            uploadForm.addEventListener('submit', function() {
                const submitBtn = uploadForm.querySelector('button[type="submit"]');
                const fileInput = document.getElementById('file');

                // 确保用户已选择文件
                if (fileInput.files.length > 0) {
                    submitBtn.innerHTML = '<span class="loading-spinner me-2"></span>上传中...';
                    submitBtn.disabled = true;
                }
            });
        }

        // 模型状态检查
        function checkModelStatus() {
            fetch('/model_status')
                .then(response => response.json())
                .then(data => {
                    const statusDiv = document.getElementById('modelStatus');
                    let html = '';

                    // 聚合模型状态
                    if (data.loading) {
                        html += `
                            <div class="status-item">
                                <span class="status-icon loading"></span>
                                <span>正在预加载AI模型，请稍候...</span>
                            </div>
                        `;
                    } else {
                        html += `
                            <div class="status-item">
                                <span class="status-icon ${data.aggregate_model_loaded ? 'success' : 'error'}"></span>
                                <span>聚合模型: ${data.aggregate_model_loaded ? '已加载' : '未加载'}</span>
                            </div>
                        `;

                        // 商品级别模型状态
                        html += `
                            <div class="status-item">
                                <span class="status-icon ${data.product_models_loaded ? 'success' : 'error'}"></span>
                                <span>商品级别模型: ${data.product_models_loaded ? `已加载 (${data.product_models_count || 0} 个模型)` : '未加载'}</span>
                            </div>
                        `;

                        if (data.last_loaded) {
                            html += `
                                <div class="status-item">
                                    <span class="status-icon success"></span>
                                    <span>最后更新: ${new Date(data.last_loaded).toLocaleString()}</span>
                                </div>
                            `;
                        }
                    }

                    statusDiv.innerHTML = html;
                })
                .catch(error => {
                    console.error('检查模型状态失败:', error);
                    const statusDiv = document.getElementById('modelStatus');
                    statusDiv.innerHTML = `
                        <div class="status-item">
                            <span class="status-icon error"></span>
                            <span>无法检查模型状态</span>
                        </div>
                    `;
                });
        }

        // 页面加载时检查模型状态
        document.addEventListener('DOMContentLoaded', function() {
            checkModelStatus();

            // 每5秒检查一次状态（直到模型加载完成）
            const statusInterval = setInterval(() => {
                fetch('/model_status')
                    .then(response => response.json())
                    .then(data => {
                        if (!data.loading && data.aggregate_model_loaded) {
                            clearInterval(statusInterval);
                        }
                        checkModelStatus();
                    })
                    .catch(error => {
                        console.error('检查模型状态失败:', error);
                        clearInterval(statusInterval);
                    });
            }, 5000);
        });
    </script>
</body>
</html> 